<template>
  <div>
    <van-list v-model="loading" :finished="finished" loading-text>
      <van-cell v-for="item in list" :key="item.id">
        <a class="avatar">
          <img
            :src="item.author.avatar_url"
            :alt="item.author.loginname"
            width="30px"
            height="30px"
            :title="item.author.loginname"
          />
        </a>
        <span style="color:#9e78c0;font-size:17px">{{ item.reply_count }}</span>
        <span>/</span>
        <span style="color:#b4b4b4;display:inline-block;margin-right:7px">{{
          item.visit_count
        }}</span>
        <span @click="toDetail(item.id)" class="title">{{ item.title }}</span>
        <span class="time">{{ time(item.last_reply_at) }}</span>
      </van-cell>
    
    </van-list>

    <!-- 分页 -->
    <van-pagination
      v-model="currentPage"
      :total-items="24"
      :items-per-page="5"
      @change="changepage"
      v-if="finished"
    />
  </div>
</template>
<script>
import { setTime } from "../../util/time";
export default {
  data() {
    return {
      list: [],
      loading: true,
      finished: false,
      currentPage: 1,
      tab: "all",
    };
  },
  created() {
    this.Load();
  },
  computed: {
    time() {
      return function(time) {
        return setTime(time);
      };
    },
  },
  methods: {
    Load() {
      this.$http1({
        url: `/topics?tab=${this.tab}&page=${this.currentPage}`,
      }).then((res) => {
        this.finished = true;
        this.loading = false;
        this.list = res.data.data;
      });
    },

    changepage(page) {
      this.finished = false;
      this.loading = true;
      this.list = "";
      this.currentPage = page;
      this.Load();
    },

    toDetail(id) {
      this.$router.push(`/topic/${id}`);
    },
  },
};
</script>
<style scoped>
.avatar {
  display: inline-block;
  margin-right: 7px;
}
.avatar img {
  width: 30px;
  height: 30px;
}
.time {
  position: absolute;
  right: 10px;
  color: #666;
  bottom: 0;
}
.van-cell__value {
  position: static;
}
.title:hover {
  color: #80bd01;
  cursor: pointer;
}

</style>
